@use "sass:map";
@import '../../theme/common/var.scss';
@import '../../theme/common/mixin.scss';
:host {
    display: inline-block;
}

.wu-tip .show {
    display: block;
}

.tip {
    border: 1px solid #888;
    position: absolute;
    border-radius: 4px;
    padding: 10px;
    z-index: 2000;
    font-size: 12px;
    line-height: 1.2;
    min-width: 10px;
    word-wrap: break-word;
    display: none;
}

.tip .tip-arrow,
.tip .tip-arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tip .tip-arrow {
    border-width: 6px;
}

.tip .tip-arrow::after {
    content: ' ';
    border-width: 5px;
}

.tip[data-popper-placement^='top'] {
    margin-bottom: 12px;
}

.tip[data-popper-placement^='top'] .tip-arrow {
    bottom: -6px;
    border-top-color: #303133;
    border-bottom-width: 0;
}

.tip[data-popper-placement^='top'] .tip-arrow::after {
    bottom: 1px;
    margin-left: -5px;
    border-top-color: #303133;
    border-bottom-width: 0;
}

.tip[data-popper-placement^='bottom'] {
    margin-top: 12px;
}

.tip[data-popper-placement^='bottom'] .tip-arrow {
    top: -6px;
    border-top-width: 0;
    border-bottom-color: #303133;
}

.tip[data-popper-placement^='bottom'] .tip-arrow::after {
    top: 1px;
    margin-left: -5px;
    border-top-width: 0;
    border-bottom-color: #303133;
}

.tip[data-popper-placement^='right'] {
    margin-left: 12px;
}

.tip[data-popper-placement^='right'] .tip-arrow {
    left: -6px;
    border-right-color: #303133;
    border-left-width: 0;
}

.tip[data-popper-placement^='right'] .tip-arrow::after {
    bottom: -5px;
    left: 1px;
    border-right-color: #303133;
    border-left-width: 0;
}

.tip[data-popper-placement^='left'] {
    margin-right: 12px;
}

.tip[data-popper-placement^='left'] .tip-arrow {
    right: -6px;
    border-right-width: 0;
    border-left-color: #303133;
}

.tip[data-popper-placement^='left'] .tip-arrow::after {
    right: 1px;
    bottom: -5px;
    margin-left: -5px;
    border-right-width: 0;
    border-left-color: #303133;
}

.tip.is-dark {
    background: #303133;
    color: #fff;
}

.tip.is-light {
    background: #fff;
    border: 1px solid #303133;
}

.tip.is-light[data-popper-placement^='top'] .tip-arrow {
    border-top-color: #303133;
}

.tip.is-light[data-popper-placement^='top'] .tip-arrow::after {
    border-top-color: #fff;
}

.tip.is-light[data-popper-placement^='bottom'] .tip-arrow {
    border-bottom-color: #303133;
}

.tip.is-light[data-popper-placement^='bottom'] .tip-arrow::after {
    border-bottom-color: #fff;
}

.tip.is-light[data-popper-placement^='left'] .tip-arrow {
    border-left-color: #303133;
}

.tip.is-light[data-popper-placement^='left'] .tip-arrow::after {
    border-left-color: #fff;
}

.tip.is-light[data-popper-placement^='right'] .tip-arrow {
    border-right-color: #303133;
}

.tip.is-light[data-popper-placement^='right'] .tip-arrow::after {
    border-right-color: #fff;
}

